<template>
    <div class="container">
        <!-- 左侧面板 -->
        <div class="leftBox">
            <!-- 违停分类占比 -->
            <div class="panel-box stop-panel" style="flex: 1;">
                <div class="panel-title">
                    <span class="title-text">大桥</span>
                </div>
                <div class="stop-list">
                    <BasicEchart :option="stopOption" />
                </div>
            </div>

            <!-- 24小时平均速度趋势 -->
            <div class="panel-box speed-panel" style="flex: 1;">
                <div class="panel-title">
                    <span class="title-text">24小时平均速度趋势</span>
                </div>
                <div class="speed-grid">
                    <BasicEchart :option="speedOption" />
                </div>
            </div>

            <!-- 一周车流量 -->
            <div class="panel-box car-panel" style="flex: 1;">
                <div class="panel-title">
                    <span class="title-text">一周车流量</span>
                </div>
                <div class="car-grid">
                    <BasicEchart :option="carOption" />
                </div>
            </div>
        </div>

        <!-- 中间区域 -->
        <div class="centerBox">
            <!-- <Map /> -->
        </div>

        <!-- 右侧面板 -->
        <div class="rightBox">
            <!-- 大桥最大容量 -->
            <div class="panel-box bridge-panel" style="flex: 1;">
                <div class="panel-title">
                    <span class="title-text">大桥最大容量</span>
                </div>
                <div style="display: flex;flex-direction: column;justify-content: center;height: 80%;">
                    <div class="bridge-grid">
                        <div class="left">
                            <img class="img" src="@/assets/imgs/fast/仪表盘.png" alt="仪表盘">
                            <div class="value">当前值：1</div>
                        </div>
                        <div class="right">
                            <div class="top">
                                <span>最大容量：80</span>
                                <span>1.25%</span>
                            </div>
                            <div class="bottom">
                                <el-progress :stroke-width="13" :show-text="false" :percentage="50" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 路面状态类型统计 -->
            <div class="panel-box device-panel" style="flex: 3;">
                <div class="panel-title">
                    <span class="title-text">路面状态类型统计</span>
                </div>
                <div class="device-grid">
                    <div class="left">
                        <img class="img" src="@/assets/imgs/fast/sucai2.png" alt="sucai2" />
                        <div class="label">
                            <div>裂缝类 0.294%</div>
                            <div>变形类 0.316%</div>
                            <div>松散类 0.215%</div>
                            <div>其他类 2.185%</div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="item" v-for="i in 4" :key="i">
                            <img class="img" src="@/assets/imgs/fast/sucai1.png" alt="sucai1" />
                            <div>
                                <div class="top">
                                    <span class="label">拥抱面积：</span>
                                    <span class="value">325.93 m</span>
                                </div>
                                <div class="bottom">
                                    <span class="label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;占比：</span>
                                    <span class="value">0.005%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 车辆通行记录 -->
            <div class="panel-box go-panel" style="flex: 2;">
                <div class="panel-title">
                    <span class="title-text">车辆通行记录</span>
                </div>
                <div class="go-container">
                    <BasicTable :columns="columns" :data="recordData" :isPage="false" height="249">
                    </BasicTable>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { h, ref } from 'vue'
import { ElButton } from 'element-plus'
import * as echarts from 'echarts';

// 违停分类占比
const stopOption = {
    color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087"],
    tooltip: {
        valueFormatter: function (value) {
            return value + " 次";
        },
        trigger: "axis",
        axisPointer: {
            type: "cross",
            label: {
                backgroundColor: "#6a7985",
            },
        },
    },
    legend: {
        data: ["微型车", "小型车", "中型车", "大型车"],
        textStyle: {
            color: "#9C9DC8FF",
            fontSize: 15, // 设置字体大小
        },
    },
    grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
    },
    xAxis: [
        {
            type: "category",
            boundaryGap: false,
            data: [
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六",
                "星期日",
            ],
            axisLabel: {
                textStyle: {
                    color: "#9C9DC8FF",
                    fontSize: 15, // 设置字体大小
                },
            },
        },
    ],
    yAxis: [
        {
            type: "value",
            data: ["5", "10", "8", "6", "7", "12", "15"],
            name: "(次)",
            axisLabel: {
                textStyle: {
                    color: "#9C9DC8FF",
                    fontSize: 15, // 设置字体大小
                },
            },
            nameTextStyle: {
                fontSize: 15,
                color: "#9C9DC8FF",
            },
        },
    ],
    series: [
        {
            name: "微型车",
            type: "line",
            smooth: true,
            lineStyle: {
                width: 0,
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "rgb(128, 255, 165)",
                    },
                    {
                        offset: 1,
                        color: "rgb(1, 191, 236)",
                    },
                ]),
            },
            emphasis: {
                focus: "series",
            },
            data: ["4", "1", "0", "0", "1", "2", "1"],
        },
        {
            name: "小型车",
            type: "line",
            smooth: true,
            lineStyle: {
                width: 0,
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "rgb(0, 221, 255)",
                    },
                    {
                        offset: 1,
                        color: "rgb(77, 119, 255)",
                    },
                ]),
            },
            emphasis: {
                focus: "series",
            },
            data: ["5", "1", "0", "4", "3", "1", "4"],
        },
        {
            name: "中型车",
            type: "line",
            smooth: true,
            lineStyle: {
                width: 0,
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "rgb(55, 162, 255)",
                    },
                    {
                        offset: 1,
                        color: "rgb(116, 21, 219)",
                    },
                ]),
            },
            emphasis: {
                focus: "series",
            },
            data: ["1", "0", "2", "3", "2", "1", "4"],
        },
        {
            name: "大型车",
            type: "line",
            smooth: true,
            lineStyle: {
                width: 0,
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "rgb(255, 0, 135)",
                    },
                    {
                        offset: 1,
                        color: "rgb(135, 0, 157)",
                    },
                ]),
            },
            emphasis: {
                focus: "series",
            },
            data: ["0", "3", "2", "5", "2", "6", "3"],
        },
    ],
};

// 24小时平均速度趋势
const speedOption = {
    xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
            "0点",
            "2点",
            "4点",
            "6点",
            "8点",
            "10点",
            "12点",
            "14点",
            "16点",
            "18点",
            "20点",
            "22点",
        ],
        axisLabel: {
            textStyle: {
                color: "#9C9DC8FF",
                fontSize: 15, // 设置字体大小
            },
        },
    },
    grid: {
        left: "1%",
        right: "3%",
        bottom: "0",
        top: "15%",
        containLabel: true,
    },
    tooltip: {
        trigger: "axis",
    },
    yAxis: {
        type: "value",
        name: "(km/h)",
        nameTextStyle: {
            fontSize: 15,
            color: "#9C9DC8FF",
        },
        axisLabel: {
            textStyle: {
                color: "#9C9DC8FF",
                fontSize: 15, // 设置字体大小
            },
        },
    },
    series: [
        {
            name: "平均速度",
            data: [82, 84, 78, 70, 62, 64, 60, 68, 64, 68, 76, 78],
            type: "line",
            areaStyle: {},
            smooth: true,
        },
    ],
};

// 一周车流量
const carOption = {
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
        },
    },
    grid: {
        left: "1%",
        right: "1%",
        bottom: "1%",
        top: "12%",
        containLabel: true,
    },
    xAxis: [
        {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            axisLabel: {
                textStyle: {
                    color: "#9C9DC8FF",
                    fontSize: 15, // 设置字体大小
                },
            },
            axisTick: {
                alignWithLabel: true,
            },
        },
    ],
    yAxis: [
        {
            name: "(辆)",
            nameTextStyle: {
                fontSize: 15,
                color: "#9C9DC8FF",
            },
            type: "value",
            axisLabel: {
                textStyle: {
                    color: "#9C9DC8FF",
                    fontSize: 15, // 设置字体大小
                },
            },
        },
    ],
    series: [
        {
            name: "车数量",
            type: "bar",
            barWidth: "60%",
            data: [204, 268, 200, 334, 196, 324, 368],
        },
    ],
};

// 路面状态类型统计
const pathOption = {
    // title: {
    //     text: '总缺陷占比\n3.01%',
    //     left: 'center',
    //     top: '45%',
    //     textStyle: {
    //         fontSize: 18,
    //         fontWeight: 'bold',
    //         color: '#333',
    //         lineHeight: 26
    //     }
    // },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}%'
    },
    graphic: [{
        // 中间圆形装饰
        type: 'circle',
        shape: { r: 60 },
        left: 'center',
        top: 'middle',
        style: {
            fill: 'transparent',
            stroke: '#fff',
            lineWidth: 2
        }
    }],
    series: [{
        type: 'pie',
        radius: ['55%', '75%'],
        center: ['50%', '45%'],
        data: [
            { value: 0.294, name: '裂缝类' },
            { value: 0.316, name: '变形类' },
            { value: 0.215, name: '松散类' },
            { value: 2.185, name: '其他类' }
        ],
        label: { show: false }, // 隐藏环形图标签
        // emphasis: {
        //     scale: false,
        //     itemStyle: {
        //         shadowBlur: 10,
        //         shadowColor: 'rgba(0, 0, 0, 0.5)'
        //     }
        // }
    }],
    // 底部数据面板
    graphic: [{
        type: 'group',
        left: 'center',
        bottom: 30,
        children: [
            // 裂缝类
            {
                type: 'rect',
                shape: { width: 12, height: 12 },
                left: '-20%',
                top: 5,
                style: { fill: '#5470C6' }
            },
            {
                type: 'text',
                left: '-18%',
                top: 0,
                style: {
                    text: '裂缝类: 0.294%',
                    fontSize: 14,
                    color: '#fff'
                }
            },
            // 变形类
            {
                type: 'rect',
                shape: { width: 12, height: 12 },
                left: '5%',
                top: 5,
                style: { fill: '#91CC75' }
            },
            {
                type: 'text',
                left: '7%',
                top: 0,
                style: {
                    text: '变形类: 0.316%',
                    fontSize: 14,
                    color: '#fff'
                }
            },
            // 松散类
            {
                type: 'rect',
                shape: { width: 12, height: 12 },
                left: '30%',
                top: 5,
                style: { fill: '#FAC858' }
            },
            {
                type: 'text',
                left: '32%',
                top: 0,
                style: {
                    text: '松散类: 0.215%',
                    fontSize: 14,
                    color: '#fff'
                }
            },
            // 其他类
            {
                type: 'rect',
                shape: { width: 12, height: 12 },
                left: '55%',
                top: 5,
                style: { fill: '#EE6666' }
            },
            {
                type: 'text',
                left: '57%',
                top: 0,
                style: {
                    text: '其他类: 2.185%',
                    fontSize: 14,
                    color: '#fff'
                }
            }
        ]
    }]
};



const columns = [
    {
        prop: 'carNo',
        label: '序号'
    },
    {
        prop: 'time',
        label: '车牌号'
    },
    {
        prop: '时间',
        label: '定位授权'
    },
    {
        prop: 'operate',
        label: '状态',
        width: 100
    }
]

// 模拟数据
const recordData = ref([
    {
        index: 1,
        carNo: '川A12345',
        time: '2024-03-18 10:00',
        auth: '已授权'
    },
    {
        index: 1,
        carNo: '川A12345',
        time: '2024-03-18 10:00',
        auth: '已授权'
    },
    {
        index: 1,
        carNo: '川A12345',
        time: '2024-03-18 10:00',
        auth: '已授权'
    },
    {
        index: 1,
        carNo: '川A12345',
        time: '2024-03-18 10:00',
        auth: '已授权'
    },
    {
        index: 1,
        carNo: '川A12345',
        time: '2024-03-18 10:00',
        auth: '已授权'
    },
    {
        index: 1,
        carNo: '川A12345',
        time: '2024-03-18 10:00',
        auth: '已授权'
    },
    {
        index: 1,
        carNo: '川A12345',
        time: '2024-03-18 10:00',
        auth: '已授权'
    },
    {
        index: 1,
        carNo: '川A12345',
        time: '2024-03-18 10:00',
        auth: '已授权'
    },

])


</script>

<style lang="scss" scoped>
.container {
    background: #001529;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    // padding: 16px;
    gap: 16px;
    overflow: hidden;
    position: relative;

    .leftBox,
    .rightBox {
        width: 650px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        overflow: hidden;
        z-index: 9
    }

    .centerBox {
        position: absolute;
        z-index: 1;
        height: 100%;
        width: 100%;
    }
}

.panel-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    // height: 100%;
    flex: 1;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(64, 224, 208, 0.1);


    .panel-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 16px;
        position: relative;
        padding-left: 24px;
        color: #40E0D0;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 16px;
            background: #40E0D0;
            border-radius: 2px;
        }

        &::after {
            content: '';
            position: absolute;
            left: 0px;
            right: 0;
            // top: 50%;
            bottom: -10px;
            height: 1px;
            background: linear-gradient(90deg, #40E0D0, transparent);
        }
    }

    // 违停分类占比
    &.stop-panel {
        .stop-list {
            width: 100%;
            height: 90%;
        }
    }

    // 24小时平均速度趋势
    &.speed-panel {
        .speed-grid {
            width: 100%;
            height: 90%;
        }
    }

    // 一周车流量
    &.car-panel {
        .car-grid {
            width: 100%;
            height: 90%;
        }
    }

    // 大桥最大容量
    &.bridge-panel {
        .bridge-grid {
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;

            .left {
                margin-right: 10px;
                text-wrap: nowrap;

                .img {
                    width: 40px;
                    height: 40px;
                }

                .value {
                    font-size: 12px;
                    color: #359487;
                }
            }

            .right {
                border-left: 1px solid #fff;
                padding-left: 20px;
                width: 90%;

                .top {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    span {
                        &:first-child {
                            font-size: 20px;
                            color: rgba(255, 255, 255, 0.6);
                        }

                        &:last-child {
                            font-size: 28px;
                            font-weight: bold;
                            color: #359487;
                            // 倾斜
                            transform: skew(-10deg);
                        }
                    }
                }

                .bottom {
                    margin-top: 20px;
                }
            }
        }
    }

    // 路面状态类型统计
    &.device-panel {
        .device-grid {
            display: flex;
            justify-content: space-between;
            height: 95%;

            .left,
            .right {
                height: 100%;
            }

            .left {
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;

                .img {
                    margin: 0 auto;
                    width: 200px;
                    height: 200px;
                }

                .label {
                    margin-top: 20px;
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                    font-size: 20px;
                    color: #fff;
                }
            }

            .right {
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                .item {
                    display: flex;
                    align-items: center;
                    gap: 12px;

                    .img {
                        height: 70px;
                    }

                    .top,
                    .bottom {
                        font-size: 26px;

                        .label {

                            color: #fff;
                        }

                        .value {
                            color: #0D7D9B;
                        }
                    }
                }
            }
        }
    }

    // 车辆通行记录
    &.go-panel {
        .go-container {}
    }
}
</style>